{% extends 'index.html' %}
{% load static %}

{% block title %}关于{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/about.css' %}">
{% endblock %}

{% block content %}
<div class="row">
    <!--左边-->
    <div class="col-lg-8 art-lists">
        <div class="me-head me-flex-b">
            <span>关于我</span>
        </div>
    </div>
    <!--右边-->
    <div class="col-lg-3 art-navs">
        <div class="panel panel-default me-panel">
            <div class="panel-heading">
                <h3 class="panel-title"><a href="#"><i class="fa fa-lightbulb-o"></i> 目录</a></h3>
            </div>
            <div class="panel-body me-panel-body">
                <p class="me-flex-b">
                    <a href="#">2020</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
                <p class="me-flex-b">
                    <a href="#">2021</a>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    $(function () {
        //获取要定位元素距离浏览器顶部的距离
        var navH = $(".art-navs").offset().top;
        var navL = $(".art-navs").offset().left;
        console.log(navH)
        console.log(navL)
        //滚动条事件
        $(window).scroll(function () {
            //获取滚动条的滑动距离
            var scroH = $(this).scrollTop();
            console.log(scroH)
            //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
            if (scroH >= navH) {
                $(".art-navs").css({"position": "absolute", "left": navL, "top": navH});
            }
        });
    });
</script>
{% endblock %}

